<template>
	<view class="">
		<view class="state">
			<text v-if="content.state == 0">待支付</text>
			<text v-else-if="content.state == 1">待发货</text>
			<text v-else-if="content.state == 2">待收货</text>
			<text v-else-if="content.state == 3">待成团</text>
			<text v-else-if="content.state == 4">拼团失败</text>
			<text v-else-if="content.state == 5">已完成</text>
		</view>
		<view class="ordercard">
			<view class="" >
				<view class="ordercard_tips" v-if="content.state == 3">
					剩余拼团时间
					<text>01:22:23</text>
					,邀请好友一起拼团！！！
				</view>
				<view class="ordercard_tips" v-if="content.state == 0">
					等待买家付款，剩余
					<text>01:22:23</text>
					订单会自动关闭！！！
				</view>
				<view class="ordercard_tips" v-else-if="content.state == 1 || content.state == 5">
					感谢您对链客商城的支持，请耐心等候！！！
				</view>
				<view class="ordercard_tips" v-else-if="content.state == 4">
					感谢您对链客商城的支持，下次继续光顾！！！
				</view>
				<view class="ordercard_tips" v-else-if="content.state == 2">
					感谢您对链客商城的支持，当前订单已发货！！！
				</view>
				<view class="orderbtn" v-if="content.state == 0">
					<view class="orderbtn_i orderbtn_left">取消订单</view>
					<view class="orderbtn_i orderbtn_right">去支付</view>
				</view>
				<view class="orderbtn" v-else-if="content.state == 1 || content.state == 4 ">
					<view class="orderbtn_i orderbtn_right">再看看</view>
				</view>
				<view class="orderbtn" v-else-if="content.state == 3 ">
					<view class="orderbtn_i orderbtn_right">邀请好友</view>
				</view>
				<view class="orderbtn" v-else-if="content.state == 5 || content.state == 2 ">
					<view class="orderbtn_i orderbtn_left">查看物流</view>
					<view class="orderbtn_i orderbtn_right">再看看</view>
				</view>
			</view>
			<view class="integra" v-if="content.type == 1">积分</view>
			<view class="integra group" v-else-if="content.type == 2">拼团</view>
		</view>
		<!-- 拼团 -->
		<view class="group_success" v-if="content.type == 2 && content.state == 1">
			<view class="group_state">
				拼单成功
			</view>
			<view class="group_header">
				<image src="../../static/image/mine/discount/header01.png" mode=""></image>
				<image src="../../static/image/mine/discount/header02.png" mode=""></image>
				<image src="../../static/image/mine/discount/header03.png" mode=""></image>
			</view>
		</view>
		<!-- 拼团中 -->
		<view class="nowgroup" v-if="content.type == 2 && content.state == 3">
			<view class="title">
				还差<text>1</text>人拼团成功，快邀请好友一起拼了吧
			</view>
			<view class="pic">
				<view class="header_pic">
					<image src="../../static/image/mine/discount/header01.png" mode=""></image>
					<view class="team">
						团长
					</view>
				</view>
				<view class="header_pic">
					<image src="../../static/image/mine/discount/header01.png" mode=""></image>
				</view>
				<view class="header_pic">
					<!-- <image src="../../static/image/mine/discount/header01.png" mode=""></image> -->
					?
				</view>
			</view>
		</view>
		<view class="orderarea">
			<image src="../../static/image/mine/discount/area.png" mode=""></image>
			<view class="orderarea_info">
				<view class="top">
					王磊
					<text>1660217464</text>
				</view>
				<view class="adress">安徽省合肥市包河区滨湖新区未来塔D座810</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="product">
			<view class="product_title">商品信息</view>
			<view class="productinfo">
				<view class="productinfo_l">
					<view class="productinfo_pic"><image :src="content.src" mode="widthFix"></image></view>
					<view class="productinfo_info">
						<view class="title">{{ content.title }}</view>
						<view class="standard">{{ content.standard }};{{ content.weight }}</view>
					</view>
				</view>
				<view class="productinfo_r">
					<view class="num">*{{ content.num }}</view>
					<view class="price">
						￥
						<text>{{ content.price }}</text>
					</view>
				</view>
			</view>
			<view class="freight">
				<text>运费</text>
				<text>免运费</text>
			</view>
			<view class="freight">
				<text>优惠券</text>
				<text>-￥2.00</text>
			</view>
			<view class="order_price" v-if="content.type != 1">
				<view class="num">共{{content.num}}件</view>
				<view class="all">合计:</view>
				<view class="price">￥{{content.num * content.price}}</view>
			</view>
			<view class="order_price" v-else>
				<view class="num">共{{content.num}}件</view>
				<view class="all">合计:</view>
				<view class="price">
					{{content.integralnum}}
					<text>/积分</text>
				</view>
			</view>
			<view class="refund" v-if = "content.state == 4">
				退款成功 <text>￥{{content.num * content.price}}元</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderinfo product">
			<view class="product_title">订单信息</view>
			<view class="orderinfo_info">订单编号：HG4546454545454</view>
			<view class="orderinfo_info">支付方式：微信</view>
			<view class="orderinfo_info">下单时间：2019-12-15 11:01:03</view>
			<view class="orderinfo_info">订单备注：无</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: {}
		};
	},
	onLoad(options) {
		this.content = JSON.parse(options.content);
		console.log(this.content);
	},
	methods: {}
};
</script>

<style lang="less" scoped>
.state {
	width: 100%;
	height: 128upx;
	background-color: #f73e2f;
	padding: 0 40upx;
	padding-top: 15upx;
	box-sizing: border-box;
	text {
		font-size: 32upx;
		color: #ffffff;
	}
}
.ordercard {
	width: calc(100% - 30upx);
	margin: auto;
	height: 180upx;
	background-color: #ffffff;
	border-radius: 20upx;
	margin-top: -55upx;
	padding: 0 25upx;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	.ordercard_tips {
		font-size: 24upx;
		color: #333333;
		margin-top: 45upx;
		text {
			color: #f73e2f;
			font-weight: bold;
		}
	}
	.orderbtn {
		margin-top: 15upx;
		display: flex;
		.orderbtn_i {
			width: 156upx;
			height: 46upx;
			text-align: center;
			line-height: 46upx;
			border-radius: 8upx;
			font-size: 24upx;
		}
		.orderbtn_left {
			border: 2upx solid #e1e1e1;
			box-sizing: border-box;
			color: #666666;
			margin-right: 10upx;
		}
		.orderbtn_right {
			background-color: #f73e2f;
			color: #ffffff;
		}
	}
	.integra {
		position: absolute;
		right: 0;
		top: 20upx;
		width: 100upx;
		height: 40upx;
		background: linear-gradient(to right, #1fd5f4 0%, #4ee9d5 100%);
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		font-size: 24upx;
		color: #ffffff;
		text-align: center;
		line-height: 40upx;
	}
	.group {
		background: linear-gradient(to right, #e4ca50 0%, #fde886 100%);
	}
}
.group_success {
	width: calc(100% - 30upx);
	margin: auto;
	margin-top: 20upx;
	height: 100upx;
	background-color: #FFFFFF;
	border-radius: 20upx;
	padding: 0 15upx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.group_state {
		font-size: 28upx;
		color: #999999;
	}
	.group_header {
		display: flex;
		align-items: center;
		image {
			width: 66upx;
			height: 66upx;
			margin-left: 10upx;
		}
	}
}
// 拼团中
.nowgroup {
	width: calc(100% - 30upx);
	margin:  auto;
	border-radius: 20upx;
	background-color: #ffffff;
	margin-top: 20upx;
	padding: 25upx;
	padding-top: 30upx;
	padding-bottom: 50upx;
	box-sizing: border-box;
	.title {
		font-size: 28upx;
		color: #999999;
		text {
			color: #000000;
		}
	}
	.pic {
		display: flex;
		margin-top: 30upx;
		.header_pic {
			width: 106upx;
			height: 106upx;
			margin-right: 20upx;
			border: 2upx dashed #E1E1E1;
			border-radius: 50%;
			padding: 6upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.header_pic:first-child {
			border: none;
			background-color: #f73e2f;
			position: relative;
			.team {
				width: 82upx;
				height: 36upx;
				border-radius: 8upx;
				font-size: 24upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 36upx;
				background: linear-gradient(to right,#f83008 0, #fa7968 100%);
				position: absolute;
				left: 50%;
				bottom: -10upx;
				transform: translate(-50%);
			}
		}
	}
}
.orderarea {
	width: calc(100% - 30upx);
	margin: 20upx auto;
	height: 140upx;
	padding: 0 15upx;
	box-sizing: border-box;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	border-radius: 20upx;
	image {
		width: 62upx;
		height: 63upx;
		margin-right: 20upx;
	}
	.orderarea_info {
		.top {
			font-size: 28upx;
			color: #333333;
			line-height: 28upx;
			text {
				font-size: 24upx;
			}
		}
		.adress {
			margin-top: 20upx;
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;
		}
	}
}
.product {
	width: calc(100% - 30upx);
	margin: auto;
	padding: 15upx 25upx;
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 20upx;
	.product_title {
		height: 60upx;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		border-bottom: 2upx solid #e1e1e1;
	}
	.productinfo {
		width: 100%;
		height: 120upx;
		display: flex;
		margin: 25upx 0;
		// align-items: center;
		justify-content: space-between;
		.productinfo_l {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			.productinfo_pic {
				width: 120upx;
				height: 120upx;
				border: 2upx solid #e1e1e1;
				border-radius: 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 104upx;
					height: 104upx;
				}
			}
			.productinfo_info {
				margin-left: 30upx;
				.title {
					width: 350upx;
					font-size: 24upx;
					color: #333333;
					line-height: 40upx;
				}
				.standard {
					font-size: 24upx;
					color: #999;
					margin-top: 10upx;
				}
			}
		}
		.productinfo_r {
			display: flex;
			align-items: center;
			.price {
				font-size: 24upx;
				color: #333333;
				margin-left: 25upx;
				text {
					font-size: 28upx;
				}
			}
			.num {
				font-size: 24upx;
				color: #999999;
				text-align: right;
			}
		}
	}
	.freight {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		color: #999999;
		margin-bottom: 40upx;
	}
	.refund {
		width: 720upx;
		height: 68upx;
		background-color: #F8F8F8;
		font-size: 28upx;
		color: #000033;
		padding-left: 70upx;
		box-sizing: border-box;
		margin-left: -25upx;
		text {
			font-size: 28upx;
			color: #333333;
			line-height: 68upx;
		}
	}
}
.order_price {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	.num {
		font-size: 24upx;
		color: #999999;
	}
	.all {
		font-size: 28upx;
		color: #333333;
		margin: 0 10upx;
	}
	.price {
		font-size: 28upx;
		color: #f73e2f;
		text {
			font-size: 28upx;
			color: #999999;
		}
	}
}
.orderinfo {
	margin-bottom: 40upx;
	.product_title {
		margin-bottom: 20upx;
	}
	margin-top: 20upx;
	.orderinfo_info {
		font-size: 24upx;
		color: #999999;
		line-height: 60upx;
	}
}
</style>
<style>
page {
	background-color: #f8f8f8;
}
</style>
